import BasicDrawer from "./index.vue";
import { defineComponent, reactive, watchEffect } from "vue";
import type { HookDrawerProps } from "./typing";
import { ConfigProvider } from "ant-design-vue";
import { isFunction } from "@/framework/utils/is";
import { useLocale } from "@/locales/useLocale";


export const myDrawer = defineComponent({
  components: { drawer: BasicDrawer },
  setup(props: HookDrawerProps) {
    const { getAntdLocale } = useLocale();
    const state = reactive({
      visible: props.visible
    });
    watchEffect(() => {
      state.visible = props.visible;
    });
    // watch(
    //   () => state.visible,
    //   (val) => {
    //     Object.is(val, false) && props.closeFunc?.();
    //   }
    // );
    const onClose = () => {
      props.closeFunc && props.closeFunc() && (state.visible = false);
    };
    const onOk = async () => {
      props.okFunc && await props.okFunc() && (state.visible = false);
    };
    return () => {
      return (
        <ConfigProvider locale={getAntdLocale.value}>
          <drawer
            {...props}
            v-model={[state.visible, "visible"]}
            onClose={onClose}
            onOk={onOk}
          >
            {isFunction(props.content) ? props.content() : props.content}
          </drawer>
        </ConfigProvider>
      );
    };
  }
});
